<template>
<div class="page-part">
    <p class="page-total-count">共 <span>{{total}}</span> 条</p>
    <p class="page-total-count">本页共 <span>{{pagetotal}}</span> 条</p>
    <select 
        class="select-page-count" 
        v-model="pageCount" 
        @change="selectedPageCount"
    >
        <option selected disabled>请选择</option>
        <option 
            :selected="2===Number(count)" 
            value="2"
        >2条/页</option>
        <option 
            :selected="5===Number(count)" 
            value="5"
        >5条/页</option>
        <option 
            :selected="10===Number(count)" 
            value="10"
        >10条/页</option>
    </select>
    <div class="turn-page-number">
        <button 
            class="page-pre" 
            @click="prePage"
            :disabled="currPage === 1"
        >&leftarrow;</button>
        <div class="show-page-number" @click.stop="handleClickTurnPage">
            <span 
                v-for="pageItem in indexs"
                :key="pageItem"
                :class="['page-number', { 'page-number-active': pageItem === currPage}]"
            >{{pageItem}}</span>
        </div>
        <button 
            class="page-next" 
            @click="nextPage"
            :disabled="currPage === pagenum"
        >&rightarrow;</button>
    </div>
    <div class="inp-number-page">
        前往 <input 
            type="text" 
            class="inp-number" 
            :value="currPage"
            @change="handleTurnPage"
        > 页
    </div>
</div>
</template>

<script>
import { messageTip } from '../JS'
export default {
    name: "myPaging",
    props: {
        total: { /* 数据的总条数 */
            required: true,
            type: Number,
            default: 0
        },
        pagenum: { /* 总页数 */
            required: true,
            type: Number,
            default: 1
        },
        page: { /* 当前页码 */
            required: true,
            type: Number,
            default: 1
        },
        count: { /* 一页的条数 */
            required: true,
            type: Number,
            default: 2
        },
        pagetotal: { /* 本页一共有多少条数据 */
            required: true,
            type: Number
        }
    },
    data() {
        return {
            pageCount: 2, /* 一页中的几条数据 */
            currPage: 1, /* 当前第几页 */
            pret: 0,
        }
    },
    created() {
        this.currPage = this.page
        this.pageCount = this.count
    },
    methods: {
        handleTurnPage(e) {
            this.currPage = e.target.value = Number( e.target.value.replace(/[^\d]/g, ""))
            if(this.currPage > this.pagenum || this.currPage < 1) {
                messageTip({content: `error：填写错误，没有该页。范围从 1 - ${this.pagenum}`})
                e.target.value = this.currPage > this.pagenum 
                    ? this.pagenum : this.currPage < 1 ? 1 : 1
            }
            this.currPage = Number(e.target.value)
            this.$emit("update:page", this.currPage)
        },
        handleClickTurnPage(e) {
            if(e.target.constructor === HTMLDivElement) return;
            const nowt = Number(Date.now())
            if(nowt - this.pret > 480) {
                this.pret = nowt
                this.currPage = Number(e.target.textContent)
                this.$emit("update:page", this.currPage)
            } else {
                messageTip({content: "请点慢一点"})
            }
        },
        nextPage() {
            if(this.currPage === this.pagenum) return;
            this.currPage++
            this.$emit("update:page", this.currPage)
        },
        prePage() {
            if(this.currPage === 1) return;
            this.currPage--
            this.$emit("update:page", this.currPage)
        },
        selectedPageCount() {
            let pageCount = Number(this.pageCount)
            let newPage = Math.ceil(this.total / pageCount)
            this.currPage = Math.min(this.currPage, newPage)
            // this.$emit("select-page-count", {pageCount: Number(this.pageCount), newPage: (this.currPage)})
            this.$emit("update:page", Number(this.currPage))
            this.$emit("update:count", Number(this.pageCount))
        }
    },
    computed: {
        indexs() {
            let left = 1
            let right = this.pagenum
            let arr = []
            if(this.pagenum >= 3) {
                if(this.currPage > 2 && this.currPage < (this.pagenum - 1)) {
                    left = this.currPage - 1
                    right = this.currPage + 1
                } else {
                    if(this.currPage <= 2) {
                        left = 1
                        right = 3
                    } else {
                        right = this.pagenum
                        left = this.pagenum - 2
                    }
                }
            }
            while (left <= right) {
                arr.push(left)
                left++
            }
            return arr;
        }
    },
    watch: {
        "pagenum"(newVal) {
            if(this.pagenum === 1) {
                this.currPage = 1
            }
        },
        "page"(newVal) {
            this.currPage = newVal
        }
    }
}
</script>

<style scoped>
.page-part {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    line-height: 50px;
    white-space: nowrap;
}
.page-total-count,
.select-page-count,
.turn-page-number {
    margin-right: 12px;
}
.select-page-count {
    display: flex;
    justify-content: center;
    width: 128px;
    height: 28px;
    padding-left: 30px;
    border-color: #cecece;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
}
.turn-page-number {
    display: flex;
    align-items: center;
    padding: 0 6px;
}
.turn-page-number .page-pre,
.turn-page-number .page-next {
    display: inline-block;
    width: 40px;
    height: 28px;
    line-height: 28px;
    margin: 0 3px;
    text-align: center;
    border: none;
    outline: none;
    border: 1px solid #cecece;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
}
.turn-page-number .page-pre:hover,
.turn-page-number .page-next:hover {
    background-color: #a3df94;
}
.inp-number-page .inp-number {
    width: 42px;
    height: 22px;
    text-align: center;
    border: none;
    outline: none;
    border: 1px solid #cecece;
    border-radius: 3px;
}
.show-page-number .page-number {
    display: inline-block;
    width: 40px;
    height: 28px;
    line-height: 28px;
    margin: 0 3px;
    text-align: center;
    border: 1px solid #cecece;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
}
.show-page-number .page-number-active {
    background-color: #cecece;
}
.show-page-number .page-number:hover {
    background-color: #cecece;
}
</style>